<template>
  <view class="feature-menu">

    <public-header></public-header>
    <view class="feature-menu">
      <view class="menu-grid-box">
        <view class="menu-grid">
          <view class="menu-item" v-for="(item,index) in menus" :class="{disabled:!item.target}"
            @click="toPages(item.target)" :key="index">
            <image class="menu-icon" :src="item.image" mode="aspectFit" v-if="item.image"></image>
            <view class="menu-icon" v-else>
              <text :class="'cuIcon-'+item.icon"></text>
            </view>
            <view class="menu-name margin-top">
              {{item.name}}
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import lockscreen from '@/common/mixins/lockscreen.js'
  export default {
    mixins: [lockscreen],
    data() {
      return {
        menus: [{
            name: "快速入库",
            icon: "newshot",
            image: "/static/icons/sy.png",
            target: "/pages/main/stockmgt/quickInStock?srv=srvretail_warehousing_aio_select&pageType=add&listLayout=listAndFilter"
          },
          {
            name: "快速出库",
            image: "/static/icons/xsgl.png",
            icon: "newshot"
          },
          {
            name: "盘点",
            image: "/static/icons/spgl.png",
            icon: "newshot"
          },
          {
            name: "报损",
            image: "/static/icons/kcgl.png",
            icon: "newshot",
          },
          {
            name: "库存预警",
            image: "/static/icons/bbgl.png",
            icon: "newshot"
          },
          {
            name: "库存查询",
            image: "/static/icons/yxgl.png",
            icon: "newshot"
          }
        ]
      }
    },
    methods: {
      toPages(target) {
        if (target) {
          uni.navigateTo({
            url: target
          })
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .feature-menu {
    // background-color: $retail-color-primary;
    // width: 100%;
    width: calc(100vw - 0rem);
    min-height: calc(100vh - 25rem); // height: 100vh;
    // width: calc(100vw - 20rem);
    // height: calc(100vh - 12rem);
    // padding: 0 6rem;
    color: #333;
    font-size: 18px;
    display: flex;
    flex-direction: row;
  }

  .menu-grid {
    width: 60%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    .menu-item {
      width: 25%;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 60rpx;
      flex-direction: column;
      font-size: 40rpx;

      &.disabled {
        filter: grayscale(100%);
      }

      .menu-icon {
        font-size: 140rpx;
        width: 20rem;
        height: 20rem;
        padding: 30rpx;
        line-height: 20rem;
        text-align: center;
      }

      .menu-name {
        font-size: $retail-font-size-lg;
        font-weight: bold;
      }
    }
  }

  .menu-grid-box {
    width: 70%;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }
</style>
